import React from "react";
import {useNavigate} from 'react-router-dom'
import { Phone } from './Commoditystyle'
import Lazyload from 'react-lazyload'
import loading from '../../../assets/mainIconfont/loading.gif'



const Commodity = (props) => {

  const {detailList} = props
  // console.log(detailList,'======================');
  // const arr = []
  // arr.push()
  // react-router V6写法
  const navigate = useNavigate()
  const gotoDetail = (id) => {
    navigate(`/detail/${id}`)
  }

  // react-router V5写法
  // const history = useHistory()
  // // 使用useHistory跳转详情页
  // const gotoDetail = () => {
  //   history.push('/detail')
  // }

  return (
    <Phone>
      {
        detailList.map((item) => {
          return(
            <div className="card" key={item.id} onClick={gotoDetail.bind(null, item.id)}>
              <div className="image">
                <Lazyload height={100} placeholder={
                  // loading 优化
                  <img width="100%" height="100%" src={loading} />
                }>
                  <img src={item.imgUrl1} alt="" />
                </Lazyload>
              </div>
              <div className="text">
                <div className="title">{item.name}</div>
                <div className="price">￥{item.price}</div>
              </div>
            </div>
          )
        })
      }      
      {/* <div className="card" onClick={gotoDetail.bind(null, 2)}>
        <div className="image">
          <Lazyload height={100} placeholder={
            // loading 优化
            <img width="100%" height="100%" src={loading} />
          }>
            <img src={goods4} alt="" />
          </Lazyload>
        </div>
        <div className="text">
          <div className="title">Readmi开年大作，有点狠的真旗舰</div>
          <div className="price">￥1899起</div>
        </div>
      </div> */}
    </Phone>
  )
}

export default Commodity